<!DOCTYPE html>
<html>
<head>
    <title>同住家庭成员</title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <link href="resources/resources/css/jquery-ui-themes.css" type="text/css" rel="stylesheet"/>
    <link href="resources/resources/css/axure_rp_page.css" type="text/css" rel="stylesheet"/>
    <link href="resources/data/styles.css" type="text/css" rel="stylesheet"/>
    <link href="resources/files/同住家庭成员/styles.css" type="text/css" rel="stylesheet"/>
    <link href="resources/files/个人信息/styles.css" type="text/css" rel="stylesheet"/>
    <script src="resources/resources/scripts/jquery-1.7.1.min.js"></script>
    <script src="resources/resources/scripts/jquery-ui-1.8.10.custom.min.js"></script>
    <script type="text/javascript">
    </script>
    <style>
        table,td,th{
            border: 1px solid;
            border-collapse: collapse;
            word-wrap:break-word;
            font-size: 13px;
        }
        th{
            background: #ccc;
        }
        table tr:nth-child(odd){
            background: #80b7cc;
        }

        #dataTable{
            border-width:0px;
            position:absolute;
            left:70px;
            top:183px;
            width: 800px;
            text-align: center;
        }
        #dataTable tr{
            height: 30px;
        }
        select{
            width: 75px;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            text-decoration: none;
            color: #000000;
        }
        input[type='text']{
            width: 75px;
            font-family: 'Arial Normal', 'Arial';
            font-weight: 400;
            font-style: normal;
            font-size: 13px;
            text-decoration: none;
            color: #000000;
            border: none;
        }
        #u30_div {
          border-width:0px;
          position:absolute;
          left:0px;
          top:0px;
          width:87px;
          height:25px;
          background:inherit;
          box-sizing:border-box;
          border-width:1px;
          border-style:solid;
          border-color:rgba(121, 121, 121, 1);
          border-radius:0px;
          -moz-box-shadow:none;
          -webkit-box-shadow:none;
          box-shadow:none;
        }
        #u31_div {
          border-width:0px;
          position:absolute;
          left:0px;
          top:0px;
          width:87px;
          height:25px;
          background:inherit;
          background-color:rgba(102, 102, 255, 1);
          box-sizing:border-box;
          border-width:1px;
          border-style:solid;
          border-color:rgba(121, 121, 121, 1);
          border-radius:0px;
          -moz-box-shadow:none;
          -webkit-box-shadow:none;
          box-shadow:none;
        }
    </style>
</head>
<body>
<div id="base" class="">
    <table id="dataTable">
        <thead>
        <tr>
            <th >编号</th>
            <th >关&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;系</th>
            <th >公民身份证号</th>
            <th >姓名</th>
            <th >性别</th>
            <th >出生日期</th>
            <th >有无预防接种证</th>
            <th >是否在本市就学</th>
            <th>删&nbsp;&nbsp;&nbsp;除</th>
        </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
<!-- Unnamed (矩形) -->
        <div id="u29" class="ax_default box_1">
                <div id="u29_div" class=""></div>
                <div id="u29_text" class="text ">
                    <p><span>流动人口服务管理系统</span></p>
                </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u30" class="ax_default box_1">
                <div id="u30_div" class=""></div>
                <div id="u30_text" class="text ">
                    <p><span onclick="toPersonalMessage()">个人信息</span></p>
                </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u171" class="ax_default box_1">
                <div id="u171_div" class=""></div>
                <div id="u171_text" class="text ">
                    <p><span onclick="toSpouse()">配偶信息</span></p>
                </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u31" class="ax_default box_1">
                <div id="u31_div" class=""></div>
                <div id="u31_text" class="text ">
                    <p><span>同住家庭成员</span></p>
                </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u32" class="ax_default box_1">
                <div id="u32_div" class=""></div>
                <div id="u32_text" class="text ">
                    <p><span onclick="toFamilyPlanning()">计生信息</span></p>
                </div>
            </div>


            <!-- Unnamed (矩形) -->
            <div id="u172" class="ax_default box_1">
                <div id="u172_div" class=""></div>
                <div id="u172_text" class="text ">
                    <p><span onclick="toEmploymentInformation()">就业信息</span></p>
                </div>
            </div>

            <!-- Unnamed (矩形) -->
            <div id="u81" class="ax_default box_1">
                <div id="u81_div" class=""></div>
                <div id="u81_text" class="text ">
                    <p><span onclick="toDwellMessage()">居住信息</span></p>
                </div>
            </div>
        <!-- Unnamed (水平线) -->
        <div id="u170" class="ax_default line">
            <img id="u170_img" class="img " src="resources/images/个人信息/u170.png"/>
        </div>
    <!-- Unnamed (矩形) -->
    <div id="u343" class="ax_default box_3">
        <div id="u343_div" class=""></div>
    </div>
    <!-- Unnamed (矩形) -->
    <div id="u344" class="ax_default box_1">
        <div id="u344_div" class=""></div>
        <div id="u344_text" class="text ">
            <p><span>版权所有：公安局</span></p>
        </div>
    </div>

    <!-- Unnamed (矩形) -->
    <div id="u409" class="ax_default button" onclick="submitFamilyMember()">
        <div id="u409_text" class="text ">
            <p><span><button>保存</button></span></p>
        </div>
    </div>
    <div id="u410" class="ax_default button" onclick="add()">
        <div id="u410_text" class="text ">
            <p><span><button >添加</button></span></p>
        </div>
    </div>

</div>
<script>
    var i = 1;
    var id;
    var employmentMessageId = "";
    var dwellMessageId = "";
    var planingId = "";
    var spouse = "";
    var provinceCode = "";
    $(function() {
        id = location.href.split("personalId=")[1];
        if(id.includes("&")){
            id = id.split("&")[0];
        }
        $.ajax({
          url:"/findPersonalMessageById",
          data:{id:id},
          dataType:"json",
          type:"post",
          async:false,
          success:function(data) {
            employmentMessageId = data.employmentMessageId;
            dwellMessageId = data.dwellMessageId;
            planingId = data.familyPlanningId;
            spouse = data.spouse;
            provinceCode = data.nowInProvince;
          }
        })
        getFamilyMemberByPersonalId();

    })
    function toPersonalMessage() {
        window.location = "/toPersonalInformation?id="+id;
    }
    /**
     * 跳转到配偶信息，传递省码
     */
    function toSpouse() {
        if(spouse!=''&&spouse!=null){
            window.location = "/toSpouse?personalId="+id+"&spouse="+spouse;
            return;
        }
        window.location = "/toSpouse?personalId="+id;
    }
    /**
     * 跳转到居住信息，传递省码
     */
    function toDwellMessage() {
        if(dwellMessageId!=''&&dwellMessageId!=null){
            window.location = "/toDwellMessage?personalId="+id+"&provinceCode="+provinceCode+"&dwellMessageId="+dwellMessageId;
            return;
        }
        window.location = "/toDwellMessage?personalId="+id+"&provinceCode="+provinceCode;
    }
    /**
     * 跳转到计生信息，传递省码
     */
    function toFamilyPlanning() {
        if(planingId!=''&&planingId!=null){
            window.location = "/toFamilyPlanning?personalId="+id+"&provinceCode="+provinceCode+"&planingId="+planingId;
            return;
        }
        window.location = "/toFamilyPlanning?personalId="+id+"&provinceCode="+provinceCode;
    }
    /**
     * 跳转到就业信息，传递省码
     */
    function toEmploymentInformation() {
            if(employmentMessageId!=''&&employmentMessageId!=null){
                window.location = "/toEmploymentInformation?personalId="+id+"&provinceCode="+provinceCode+"&employmentMessageId="+employmentMessageId;
                return;
            }
            window.location = "/toEmploymentInformation?personalId="+id+"&provinceCode="+provinceCode;
    }
    //ok
    function add() {
        var html = '<tr>' +
            '<input name="ids" type="hidden">' +
            '<td ><input type="text" name="id" readonly value="'+i+'"> </td>' +
            '<td ><select id="relation'+i+'" class="relation"></select></td>' +
            '<td ><input type="text " name="citizenIdentificationNumber" onblur="getBirth()"></td>' +
            '<td ><input type="text" name="name"></td>' +
            '<td ><input type="radio" class="sex" name="sex'+i+'" value="1">男<input class="sex" type="radio" name="sex'+i+'" value="0">女</td>' +
            '<td ><input type="text" name="birth" readonly></td>' +
            '<td ><input type="radio" class="guardAgainst" name="guardAgainst'+i+'" value="1">是<input type="radio" class="guardAgainst" name="guardAgainst'+i+'" value="0">否</td>' +
            '<td ><input type="radio" class="school" name="school'+i+'" value="1">是<input type="radio" name="school'+i+'" class="school" value="0">否</td>' +
            '<td><a href="avascript:" onclick=\'{if(confirm("确定要删除吗?")) {deleteTr(this); }else {}}\'>删除</a></td>'+
            '</tr>'
        $("tbody").append(html);
        loadRelation();
    }
    function getIdentity() {
        var bp = 0;
        $.each($("input[name='citizenIdentificationNumber']"),function(index,item) {
            var value = /^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/.test($(item).val().trim());
            if(!value){
                bp = 1;
            }
        })
        $.each($(".relation"),function(index,item) {
            if($(item).val()==""){
                bp = 2;
            }
        })
        $.each($("input[name='name']"),function(index,item) {
            var value = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{2,20}$/.test($(item).val().trim());
            if(!value){
                bp = 3;

            }
        })
        if(bp == 0){
            return true;
        }else if (bp == 1) {
            alert("身份证号格式错误")
            return false;
        }else if (bp == 2) {
            alert("请选择关系");
            return false;
        }else if (bp == 3) {
            alert("姓名格式错误");
            return false;
        }

    }
    //ok
    function deleteTr(obj) {
        //通过this找到父级元素节点
        var tr = obj.parentNode.parentNode;
        //找到表格
        var tbody = tr.parentNode;
        //删除行
        tbody.removeChild(tr);
    }
    //回显
    function getFamilyMemberByPersonalId() {
        $.ajax({
            url:"/getFamilyMemberByPersonalId",
            data:{personalId:id},
            type:"post",
            dataType:"json",
            success:function(data) {
                $.each(data,function(index,item) {
                    add();
                    $($(".relation")[index]).val(item.relation);
                    $("input[name='citizenIdentificationNumber']")[index].value=item.citizenIdentificationNumber;
                    $("input[name='name']")[index].value=item.name;
                    var sexArr = new Array();
                    sexArr.push($($(".sex")[2*index]),$($(".sex")[2*index+1]));
                    $.each(sexArr,function(index,item2) {
                        if($(item2).val()==item.sex){
                            $(item2).attr("checked",true);
                        }
                    })
                    var guardAgainstArr = new Array();
                    guardAgainstArr.push($($(".guardAgainst")[2*index]),$($(".guardAgainst")[2*index+1]));
                    $.each(guardAgainstArr,function(index,item2) {
                        if($(item2).val()==item.guardAgainst){
                            $(item2).attr("checked",true);
                        }
                    })
                    var schoolArr = new Array();
                    schoolArr.push($($(".school")[2*index]),$($(".school")[2*index+1]));
                    $.each(schoolArr,function(index,item2) {
                        if($(item2).val()==item.sex){
                            $(item2).attr("checked",true);
                        }
                    })
                    $($("input[name='birth']")[index]).val(item.birth);
                    // $($("input[name='guardAgainst']")[index]).val(item.guardAgainst);
                    // $($("input[name='school']")[index]).val(item.school);
                    $($("input[name='ids']")[index]).val(item.id);
                })
            }
        })

    }
    //ok
    function submitFamilyMember() {
        var isT = getIdentity()
        if(!isT){
            return;
        }
        var formData = new FormData();//FormData赋值给formData
        var relationArr = new Array();//Array赋值给relationArr
        $.each($(".relation"),function(index,item) {
            relationArr.push($(item).val());//把所有name属性是relation的value值给relationArr
        })
        var citizenIdentificationNumberArr = new Array();
        $.each($("input[name='citizenIdentificationNumber']"),function(index,item) {
            citizenIdentificationNumberArr.push($(item).val());//把所name属性是citizenIdentificationNumberArr的value值给citizenIdentificationNumberArr
        })
        var nameArr = new Array();
        $.each($("input[name='name']"),function(index,item) {
            nameArr.push($(item).val());//以此类推
        })
        var birthArr = new Array();
        $.each($("input[name='birth']"),function(index,item) {
            birthArr.push($(item).val());//以此类推
        })
        var sexArr = new Array();
        $.each($(".sex:checked"),function(index,item) {
            sexArr.push($(item).val());//以此类推
        })
        var schoolArr = new Array();
        $.each($(".school:checked"),function(index,item) {
            schoolArr.push($(item).val());//以此类推
        })
        var guardAgainstArr = new Array();
        $.each($(".guardAgainst:checked"),function(index,item) {
            guardAgainstArr.push($(item).val());//以此类推
        })
        var ids = new Array();
        $.each($("input[name='ids']"),function(index,item){
            if($(item).val()!=""){
                ids.push($(item).val())
            }else {
                ids.push(0);
            }
        })
        formData.append("ids",ids);
        formData.append("relationArr",relationArr);//把键relationArr赋给relationArr然后被赋值的relationArr再把值给append
        formData.append("citizenIdentificationNumberArr",citizenIdentificationNumberArr);//以此类推
        formData.append("nameArr",nameArr);//以此类推
        formData.append("birthArr",birthArr);//以此类推
        formData.append("sexArr",sexArr);//以此类推
        formData.append("schoolArr",schoolArr);//以此类推
        formData.append("guardAgainstArr",guardAgainstArr);
        formData.append("personalId",id);
        $.ajax({
            url:"/submitFamilyMember",
            data:formData,
            dataType:"json",
            type:"post",//固定格式
            processData:false,
            contentType:false,
            success:function(data) {
                alert("添加成功");
                toFamilyPlanning();
            }
        })
    }
    //ok
    function loadRelation() {
        $.ajax({
            url:"/loadRelation",
            dataType:"json",
            type:"post",
            async:false,
            success:function (data){
                var s = "#relation"+(i++);//取下拉框的id
                var relation = $(s);//
                relation.empty();//清空
                var html = "<option value=''>请选择：</option>";//
                $.each(data,function (index, item) {
                    html+="<option value='"+item.id+"'>"+item.name+"</option>"
                })
                relation.append(html);
            }
        })
    }
    //ok
    function getBirth() {
        $.each($("input[name='citizenIdentificationNumber']"),function(index,item) {
            var value = $(item).val().trim().match(/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/);
            if(value==null){
                return;
            }
            var birth = $(item).val();//把citizenIdentificationNumber的值给出生日期birth
            var year = birth.substring(6,10);//截取citizenIdentificationNumber值中的第6到第10位
            var month = birth.substring(10,12);//截取citizenIdentificationNumber值中的第10到12位
            var day = birth.substring(12,14);//截取citizenIdentificationNumber值中的第12到14位
            var sex = birth.substring(16,17);
            birth = year+"-"+month+"-"+day;//然后把值拼接给birth
            $("input[name='birth']")[index].value=birth;//alert的值又给birth
            var sexArr = new Array();
            sexArr.push($($(".sex")[2*index]),$($(".sex")[2*index+1]));
            $.each(sexArr,function(index,item2) {
                if($(item2).val()==(sex%2)){
                    $(item2).attr("checked",true);
                }
            })

        })

    }
</script>
</body>
</html>
